import React, { Component } from 'react';
import { connect } from 'react-redux';
import { updateData } from "../reducer/index";

class Videoitem extends Component{
    render() {
        let {
            channels,
            name,
            status
        } = this.props.info;
        let { channelPicUrl } = channels[0];
        let isOnline = status === 1;
        return (
            <div className='video-item'>
                <img className='video-img' src={channelPicUrl} onClick={this._onClick}/>
                <div className="video-name">{name}</div>
                < div className = { `video-state ${isOnline?'online':'offline'}` } >
                    {
                        isOnline ? '在线':'离线'
                    }
                </div>
            </div>
        );
    }

    _onClick = async () => {
        let { info, accessToken } = this.props;
        let res = await window.getKitToken({
            "type": "0",
            deviceId: info.deviceId,
            "channelId": "0",
            "token": accessToken
        });
        res.result.msg==="操作成功。"&&updateData({
            play_info: {
                deviceId: info.deviceId,
                channelId: 0,
                type: 1,
                streamId: 0,
                kitToken: res.result.data.kitToken
            },
            isHide:false
        });

    }
}

const mapStateToProps = (state) => { 
    return {
        accessToken: state.accessToken
    };
};

export default connect(mapStateToProps)(Videoitem);